<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js腾讯视频网站焦点图 - 站长素材</title>
</head>

<body>
<!--演示内容开始-->
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/startMove.js"></script>
<script type="text/javascript">
window.onload=function(){
	var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
	var aTextLi=document.getElementById('text_list').getElementsByTagName('li');
	var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
	var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
	var oPrev=document.getElementById('btn_prev');
	var oNext=document.getElementById('btn_next');
	var oDiv=document.getElementById('box');
	var i=0;
	var iNowUlLeft=0;
	var iNow=0;
	
	oPrev.onclick=function(){
		if(iNowUlLeft>0){
			iNowUlLeft--;
			oUlleft();
		}
		oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
		oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
	}
	
	oNext.onclick=function(){
		if(iNowUlLeft<aIcoLi.length-7){
			iNowUlLeft++;
			oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
		}
		oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
		oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
	}
	
	for(i=0;i<aIcoLi.length;i++){
		aIcoLi[i].index=i;
		aIcoLi[i].onclick=function(){
			if(iNow==this.index){
				return false;
			}
			iNow=this.index;
			tab();
		}
	}
	
	function tab(){
		for(i=0;i<aIcoLi.length;i++){
			aIcoLi[i].className='';
			aPicLi[i].style.filter='alpha(opacity:0)';
			aPicLi[i].style.opacity=0;
			aTextLi[i].getElementsByTagName('h2')[0].className='';
			miaovStopMove( aPicLi[i]);
		}
		aIcoLi[iNow].className='active';
		//aPicLi[this.index].style.filter='alpha(opacity:100)';
		//aPicLi[this.index].style.opacity=1;
		miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
		aTextLi[iNow].getElementsByTagName('h2')[0].className='show';
	}
	
	function oUlleft(){
		oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
	}
	
	function autoplay(){
		iNow++;
		if(iNow>=aIcoLi.length){
			iNow=0;
		}
		if(iNow<iNowUlLeft){
			iNowUlLeft=iNow;
		}else if(iNow>=iNowUlLeft+7){
			iNowUlLeft=iNow-6;
		}
		oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
		oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
		oUlleft();
		tab();
	}
	
	var time=setInterval(autoplay,3000);
	oDiv.onmouseover=function(){
		clearInterval(time);
	}
	oDiv.onmouseout=function(){
		time=setInterval(autoplay,3000);
	}

}
</script>

<div style="width:760px;margin:20px auto; clear:both; text-align:center;  "><script src="/demo/js/ad_js/76090.js" type="text/javascript"></script></div>

<div id="box">
	<ul id="pic_list">
		<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
        <a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_1.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_2.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_3.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_4.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_5.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_6.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_7.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_8.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_9.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_10.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_11.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_12.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_13.jpg" alt="" /></a></li>
		<li><a href="http://sc.chinaz.com"><img width="660" height="330" src="img/pic_14.jpg" alt="" /></a></li>
	</ul>
	
	<div class="mark"></div>

	<ul id="text_list">
		<li><h2 class="show"><a href="http://sc.chinaz.com">新闻标题 新闻标题...</a></h2></li>
		<li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题可自拔...</a></h2></li>
		<li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
		<li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
		<li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
        <li><h2><a href="http://sc.chinaz.com">新闻标题 新闻标题..</a></h2></li>
	</ul>
	
	<div id="ico_list">
		<ul>
			<li class="active"><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_1.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_2.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_3.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_4.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="125" height="70" src="img/ico_5.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_6.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_7.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="62" height="34" src="img/ico_8.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_9.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_10.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_11.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_12.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_13.jpg" alt="" /></a></li>
			<li><a href="javascript:void(0)"><img width="64" height="34" src="img/ico_14.jpg" alt="" /></a></li>
		</ul>
	</div>
	
	<a href="javascript:void(0)" id="btn_prev" class="btn"></a>
	<a href="javascript:void(0)" id="btn_next" class="btn showBtn"></a>
</div>
<!--演示内容结束-->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>